<div class="vpad10">
    <h4 class="mb-xs text-primary">
        Basic Information

        <div class="task-actions pull-right">
            <span class="mr-xxs action-button" uib-dropdown ng-if="appConfig.connectors.cortex.enabled">
                <a href class="text-primary noline" ng-click="getTaskResponders()" uib-dropdown-toggle>
                    <i class="text-primary fa fa-cog"></i>
                    Responders
                    <i class="text-primary fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu" uib-dropdown-menu>
                  <li ng-if="taskResponders && taskResponders.length === 0">
                    <a href ng-click="getTaskResponders(true)">
                      <strong><i class="fa fa-refresh mr-xxs"></i> No responders available</strong>
                    </a>
                  </li>
                  <li ng-repeat="responder in taskResponders">
                    <a href ng-click="runResponder(responder.id, responder.name)">
                      <strong>{{responder.name}}</strong>
                      <br>
                      <small>{{responder.description}}</small></a>
                  </li>
                </ul>
            </span>
            <a href ng-click="switchFlag()">
                <span class="mr-xxs action-button" ng-class="{true: 'text-yellow', false: 'text-muted'}[task.flag]">
                    <i class="fa fa-flag"></i> {{task.flag ? 'Unflag' : 'Flag'}}
                </span>
            </a>

            <a href ng-click="startTask(task)">
                <span ng-show="task.status == 'Waiting'" class="action-button text-primary">
                    <i class="fa fa-play"></i> Start
                </span>
            </a>

            <a href ng-click="openTask(task)">
                <span ng-show="task.status == 'Completed'" class="action-button text-success">
                    <i class="fa fa-check-circle"></i> Reopen
                </span>
            </a>

            <a href ng-click="closeTask(task)">
                <span ng-show="task.status == 'InProgress'" class="action-button text-muted">
                    <i class="fa fa-check-circle-o"></i> Close
                </span>
            </a>
        </div>
    </h4>
</div>

<div class="row">
    <div class="col-md-6">
        <dl class="dl-horizontal">
            <dt class="pull-left">Title</dt>
            <dd>
                <updatable-simple-text on-update="updateField('title', newValue)" value="task.title"/>
            </dd>
        </dl>

        <dl class="dl-horizontal">
            <dt class="pull-left">Group</dt>
            <dd>
                <updatable-simple-text on-update="updateField('group', newValue)" value="task.group"/>
            </dd>
        </dl>

        <dl class="dl-horizontal">
            <dt class="pull-left">Assignee</dt>
            <dd>
                <updatable-user on-update="updateField('owner', newValue)" value="task.owner"/>
            </dd>
        </dl>
    </div>

    <div class="col-md-6">
        <dl class="dl-horizontal">
            <dt class="pull-left">Date</dt>
            <dd><updatable-date on-update="updateField('startDate', newValue)" value="task.startDate"/></dd>
        </dl>

        <dl class="dl-horizontal" ng-show="task.status == 'Completed'">
            <dt class="pull-left">Close date</dt>
            <dd>
                <span ng-bind="task.endDate | showDate"></span>
            </dd>
        </dl>

        <dl class="dl-horizontal" ng-class="{'Completed': 'text-success', 'InProgress': 'text-warning'}[task.status]">
            <dt class="pull-left">Duration</dt>
            <dd ng-show="task.status === 'Completed'">
                Closed after <em ng-bind="(task.endDate - task.startDate) | amDurationFormat : 'milliseconds'"></em>
            </dd>
            <dd ng-show="task.status === 'InProgress'">
                Started <em am-time-ago="task.startDate"></em>
            </dd>
        </dl>

        <dl class="dl-horizontal" ng-show="task.status !== 'Completed'">
            <dt class="pull-left">Status
            </dt>
            <dd>
                <span ng-bind="task.status"></span>
            </dd>
        </dl>
    </div>

    <div class="col-md-12">
         <h4 class="vpad10 text-primary">Description</h4>
         <div class="description-pane">
             <updatable-text on-update="updateField('description', newValue)" placeholder="Task description" value="task.description"></updatable-text>
         </div>
    </div>

    <!-- New Log -->
    <div class="col-md-12">
        <h4 class="vpad10 text-primary">Task logs</h4>

        <div class="row clearfix" ng-show="!adding">
            <div class="col-md-12">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group" uib-dropdown>
                        <button class="btn btn-sm btn-primary" ng-click="showLogEditor()">
                            <i class="fa fa-plus"></i>
                            Add new task log</button>
                    </div>
                    <div class="btn-group" uib-dropdown>
                        <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                            <i class="fa fa-sort"></i>
                            Sort by: {{sortOptions[state.sort]}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" uib-dropdown-menu>
                            <li ng-repeat="(key, value) in sortOptions">
                                <a ng-click="sortBy(key)">{{value}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group pull-right" role="group">
                        <page-sizer collection="logs" sizes="[10, 15, 30, 100]"></page-sizer>
                    </div>
                </div>

            </div>
        </div>
        <div class="row" ng-show="adding">
            <div class="col-md-12">
                <div class="clearfix">
                    <a class="pull-right" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank"><i class="fa fa-question-circle"></i> Markdown Reference</a>
                </div>
                <textarea name="newLog" autofocus="beforeNewLogShow" class="content-box" markdown-editor="markdownEditorOptions" rows="10" ng-model="newLog.message"></textarea>
                <div control="state" file-chooser="" filemodel="newLog.attachment" ng-show="!state.attachmentCollapsed" preview="false"></div>
                <div class="btn-toolbar mt-xxs">
                    <button class="btn btn-sm btn-default" ng-click="cancelAddLog();" ng-disabled="loading">Cancel</button>
                    <button class="btn btn-sm btn-primary pull-right" ng-click="addLog();" ng-disabled="loading || newLog.message.length === 0">
                        <i class="glyphicon glyphicon-comment"></i>
                        Add log
                    </button>
                    <button uib-btn-checkbox btn-checkbox-false="true" btn-checkbox-true="false" class="btn btn-sm btn-default pull-right" ng-model="state.attachmentCollapsed" ng-disabled="loading">
                        <i class="text-default glyphicon glyphicon-paperclip"></i>
                        {{state.attachmentCollapsed ? 'Add' : 'Discard'}}
                        attachment
                    </button>
                </div>
            </div>
        </div>

        <!-- Log list -->
        <div class="row mv-s" ng-show="logs.total === 0">
            <div class="col-md-12">
                <div class="empty-message">No records</div>
            </div>
        </div>

        <psearch control="logs"></psearch>
        <div ng-repeat="log in logs.values">
            <log-entry log="log" app-config="appConfig"></log-entry>
        </div>
        <psearch control="logs"></psearch>
    </div>



    <div class="col-md-12">
        <div class="task-actions vpad10" ng-if="actions.values.length">
            <responder-actions header="Responder Jobs" actions="actions"></responder-actions>
        </div>
    </div>

</div>
